<template>
    <div class="news">
        <div class="return" @click="close()">
            <img src="~assets/imgs/global/left.svg" alt="" />
        </div>
        <div class="content">
            <div class="img">
                <img :src="newsList[newsIndex].pic_url" alt="" />
            </div>
            <h1 class="title">{{ newsList[newsIndex].name }}</h1>
            <h3 class="title">{{ newsList[newsIndex].artist }}</h3>
            <div class="title" v-html="newsList[newsIndex].content"></div>
        </div>
        <div class="operate">
            <div class="like">
                <!-- <img
          v-show="like"
          @click="like = !like"
          src="~assets/imgs/global/like.svg"
        />
        <img
          v-show="!like"
          @click="like = !like"
          src="~assets/imgs/global/unlike.svg"
        /> -->
                <div></div>
            </div>
            <div class="share">
                <img
                    @click="shareNews(newsList[newsIndex]._id)"
                    src="~assets/imgs/global/share.svg"
                    alt=""
                />
            </div>
        </div>
    </div>
</template>

<script>
import { mapState } from "vuex";
export default {
    name: "News",
    data() {
        return {
            like: false,
        };
    },

    methods: {
        shareNews(_id) {
          this.$emit("shareNews",_id)
        },
        close() {
            this.$store.commit("newsIndex", -1);
        },
    },
    computed: mapState(["newsList", "newsIndex"]),
};
</script>

<style lang="less" scoped>
.news {
    position: absolute;
    z-index: 100;
    background-color: white;
    width: 100vw;
    font-size: 0.3rem;
    min-height: 100vh;
    overflow: hidden;
    img {
        display: block;
        width: 0.6rem;
        margin: 0.2rem;
    }
    .return {
        width: 100vw;
        height: 1rem;
        position: fixed;
        top: 0;
        left: 0;
        background-color: #f3f3f2;
        right: 0;
    }
    .content {
        width: 100vw;
        height: auto;
        margin-top: 1rem;
        .img {
            width: 100%;
            height: auto;
            img {
                width: 100vw;
                margin: 0 auto;
            }
        }
        .title {
            margin: 0.1rem 0.2rem 0;
        }
    }
    .operate {
        margin: 0.5rem auto;
        display: flex;
        flex-direction: row;
        justify-content: space-around;
    }
}
</style>
